<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性布局</title>
		<style>
			/* 创建的大盒子宽度1000，水平居中 
				里边每一个小盒子宽高200*300
			*/
			.box {
				width: 1000px;
				margin: 100px auto;
				/* height: 1000px; */
				background-color: pink;
				/* 开启弹性布局 */
				display: flex;
				/* 默认水平方向就是主轴 */
				/* flex-direction: row; */
				/* 主轴的对齐方式
				 space-between  两端对齐
				 space-around  每个盒子两端边距相同
				 */
				justify-content: space-around;
			}
			.box div {
				width: 200px;
				height: 300px;
			}
			.box1 {
				background-color: lightblue;
			}
			.box2 {
				background-color: lightseagreen;
			}
			.box3 {
				background-color: lightcoral;
			}
			.box4 {
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
			<div class="box4">4</div>
		</div>
	</body>
</html>